<template>
  <div class="cart-view">
    <div class="cart-top">
      购物车
      <img class="return-img" src="../assets/images/sreach/left.png" @click="$router.go(-1)">
      <img class="search-img" src="../assets/images/sreach.png" @click="$router.push({path:'/search'})">
    </div>

    <!-- 提示 tip -->
    <van-notice-bar left-icon="info-o">温馨提示：产品是否购买成功，以最终下单为准，请尽快结算</van-notice-bar>

    <div class="u-line"></div>

    <!-- 未登录时 -->
    <div class="login-tip" v-show="!loginstate">
      <div>登录后享受更多优惠</div>
      <div class="gologin-btn" @click="$router.push({path:'/login'})">去登录 &gt;</div>
    </div>
    
    <!-- 登录时 -->
    <div class="cart-con">
      <!-- 购物车为空时 -->
      <div class="cart-none" v-show="!goods[0]">
        <div class="cart-none-con">
          <img src="../assets/images/cart-none.png">
          <div>购物车还是空的</div>
          <div class="border-btn" @click="$router.push({path:'/sort'})">去逛逛</div>
        </div>
      </div>
      
      <!-- 购物车不为空时 -->
      <div class="cart-item" v-for="(g, index) in goods" :key="index" v-show="goods[0]">
        <div class="checkbox-btn">
          <input :id="g.id" type="checkbox" class="transparent-box" :checked="checkedbtn">
          <label :for="g.id" @click="checkBtn(index)"></label>
        </div>

        <div class="cart-product">
          <div class="pro-img">
            <img :src="g.img">
          </div>
          <div class="cart-product-con">
            <div class="cart-name">{{ g.content }}</div>
            <div class="cart-product-price">售价：{{ g.price }}元</div>
            <div class="cart-item-operation">
              <div class="cart-item-num">
                <div class="sub-btn" :class="{active: g.number === 1}" @click="subBtn(index)"> - </div>
                <div class="num">{{ g.number }}</div>
                <div class="add-btn" @click="addBtn(index)"> + </div>
              </div>
              <div class="del-btn" @click="delBtn(g.id)"><img src="../assets/images/sreach/del.png"></div>
            </div>
          </div>
        </div>
      </div>

    </div>

    <div class="cart-bot" v-show="goodsNum !== 0">
      <!-- 计算总金额 -->
      <div class="all">
        <div>共 {{ goodsNum }} 件 金额：</div>
        <div class="all-money"><span>{{ totalAmount }}</span> 元</div>
      </div>
      <div class="shop-btn btn" @click="$router.push({path:'/index'})">继续购物</div>
      <div class="amount-btn btn" @click="Topay">去结算</div>
    </div>

    <!-- 购物车推荐 -->
    <div class="cart-recommend">
      <img style="width: 100%;" src="../assets/images/sreach/recommend.png" >
      <SearchRecommendItem  v-for="(r,i) in recommendList" :recommendList="r" :key="i" />
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { mapState, mapGetters } from 'vuex'
import SearchRecommendItem from '@/components/Search/SearchRecommendItem.vue'
export default {
  components: { SearchRecommendItem },
  data(){
    return {
      checkedbtn: true,
      recommendList: []
    }
  },
  computed: {
    ...mapState(['goods', 'loginstate','account']),
    ...mapGetters(['totalAmount', 'goodsNum', 'payCart']), 
  },
  methods:{
    // 推荐列表
    async getRecommendList() {
      let { data } = await this.$http("https://apis.netstart.cn/xmsc/cart_recom")
      this.recommendList = data.data.recom_list
      // console.log(this.recommendList);
    },

    checkBtn(i){
      this.checked = false
      this.$store.commit('toggleSelete', i)
    },
    delBtn(id){
      this.$store.commit('delGoods', id)
    },
    addBtn(i){
      this.$store.commit('addNum', i)
    },
    subBtn(i){
      this.$store.commit('subNum', i)
    },
    Topay(){
      if(this.$store.state.loginstate){
        let payId = new Date().getTime()
        let payCartList = JSON.parse(localStorage.payCartList || '[]')
        let addressList = JSON.parse(localStorage.addressList || '[]')
        let defaultAddress = addressList.filter(k => k.contactInfo.isDefault)[0]
        let payCart = {
          payId,
          payCart: this.payCart,
          payMoney: this.totalAmount,
          payNum: this.goodsNum,
          payName: defaultAddress?.contactInfo?.name?defaultAddress?.contactInfo?.name:this.account,
          payAddress: this.defaultAddress?.contactInfo?.addressDetail
          ?this.defaultAddress?.contactInfo?.province +" - "+this.defaultAddress?.contactInfo?.city+" - "+this.defaultAddress?.contactInfo?.county +" "+        this.defaultAddress?.contactInfo?.addressDetail+"("+
          this.defaultAddress?.contactInfo?.areaCode+")":"",
          payType: 0,
          state: 1    // 1 为未支付，2 为待发货，3为已收货
        }
        payCartList = [payCart, ...payCartList.filter(k => k.id !== payId)]
        localStorage.payCartList = JSON.stringify(payCartList)

        this.$router.push({
          path:`/settlement/${payId}`
        })
        this.$store.commit('addOrder')
      }else{
        Toast("请登录")
      }
    }
  },
  mounted(){
    this.getRecommendList()
  }
}
</script>

<style lang="scss" scoped>
.cart-view{
  padding-top: 13vw;

  .cart-top{
    color: #666666;
    width: 100vw;
    height: 13vw;
    text-align: center;
    line-height: 13vw;
    background-color: #f2f2f2;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;

    .return-img{
      width: 8vw;
      height: 8vw;
      position: absolute;
      left: 2vw;
      top: 2.5vw;
    }

    .search-img{
      width: 10vw;
      height: 10vw;
      position: absolute;
      right: 2vw;
      top: 1vw;
    }
  }

  .u-line{
    width: 100vw;
    height: 2vw;
    background: #f5f5f5;
  }
  
  .login-tip{
    width: 100vw;
    height: 15vw;
    line-height: 15vw;
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4vw;
    box-sizing: border-box;
    background-color: #ffffff;

    .gologin-btn{
      font-size: 14px;
      color: #666666;
    }
  }

  .cart-con{

    .cart-none{
      color: #ababab;
      font-size: 14px;
      width: 100vw;
      height: 17vw;
      background-color: #ebebeb;

      .cart-none-con{
        width: 60vw;
        margin: 0 auto;
        padding-top: 3.5vw;
        display: flex;
        justify-content: space-between;
        align-items: center;

        img{
          width: auto;
          height: 10vw;
        }

        .border-btn{
          color: #333;
          width: 16vw;
          height: 7vw;
          line-height: 7vw;
          text-align: center;
          border: #c1c1c1 1px solid;
        }
      }
    }

    .cart-item{
      color: #333;
      width: 100vw;
      display: flex;
      align-items: center;
      padding: 4vw 0;
      background-color: #fff;
      border-bottom: #f5f5f5 3vw solid;

      .checkbox-btn{
        width: 10vw;
        font-size: 12px;
        text-align: center;
        position: relative;

        .transparent-box +label{
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-2.5vw);
          display: inline-block;
          width: 5vw;
          height: 5vw;
          border: #ff6a1b 1px solid;
          border-radius: 50%;
          background: transparent;
        }

        .transparent-box:checked +label::before{
          color: #ffffff;
          content: "";
          display: inline-block;
          width: 5vw;
          height: 5vw;
          font-size: 16px;
          border-radius: 50%;
          background: #ff6a1b url(../assets/images/check_press.png) no-repeat;
          background-size: contain;
          border: #ff6a1b 1px solid;
        }

        input[type=checkbox]{
          visibility: hidden;
        }
      }

      .cart-product{
        width: 88vw;
        display: flex;
        align-items: center;
        
        .pro-img{
          width: 26vw;
          height: 26vw;
          overflow: hidden;
          border: #f5f5f5 1px solid;
          margin:0 4vw 0 2vw;

          img{
            width: 26vw;
            height: 26vw;
          }
        }

        .cart-product-con{
          width: 54vw;

          .cart-name{
            font-size: 15px;
            height: 12vw;
            line-height: 6vw;
          }

          .cart-product-price{
            color: #ff6a1b;
            font-size: 12px;
          }

          .cart-item-operation{
            height: 12vw;
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            margin-top: 2vw;
            
            .cart-item-num{
              color: #666;
              display: flex;
              align-items: center;

              div{
                font-size: 18px;
                width: 8vw;
                height: 8vw;
                line-height: 8vw;
                text-align: center;
                border: #f5f5f5 1px solid;
              }

              .sub-btn{
                font-size: 32px;
                background-color: #f4f4f4;

                &.active{
                  color: #999;
                  background-color: #fafafa;
                }
              }
              
              .add-btn{
                font-size: 30px;
                background-color: #f4f4f4;
              }
            }
            
            .del-btn{

              img{
                width: 5vw;
              }
            }
          }
        }
      }
    }

  }

  .cart-bot{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 14vw;
    display: flex;
    background-color: #ffffff;
    z-index: 9999;

    .all{
      color: #666666;
      width: 40vw;
      height: 14vw;
      line-height: 7vw;
      padding-left: 4vw;
      background-color: #ffffff;

      .all-money{

        span{
          color: #ff6a1b;
          font-size: 22px;
          font-weight: bold;
        }
      }
    }
    
    .shop-btn{
      width: 30vw;
      height: 14vw;
      line-height: 14vw;
      text-align: center;
      background-color: #f4f4f4;
    }    
    .amount-btn{
      color: #fff;
      width: 30vw; 
      height: 14vw;
      line-height: 14vw;
      text-align: center;
      background-color: #ff6a1b;

    }

  }

  .cart-recommend{
    width: 100vw;
    display: flex;
    flex-wrap: wrap;
  }

}
</style>